前言

從Mdn搜尋 flex 屬性相關資料，會發現flex-direction跟flex-wrap會包含在flex裡頭，照前面說這兩者是針對 flex container 的屬性，
之所以跟flex item 無關是因為它們控制的是容器如何排列彈性元素（items），而不是控制彈性元素本身的樣式。

有這樣前提下，對接下來討論的flex會少一點疑惑。

Flex Item 主要屬性:

此「Flex」非彼flex

Flex排版特色在於彈性項目有「彈性(flex)」，藉由改變寬或高以符合可用空間，彈性容器依據各項目的彈性拉伸壓縮比例來分配空間。

flex屬性

flex 屬性是下列屬性的簡寫：

• flex-grow
• flex-shrink
• flex-basis

藉由對彈性項目宣告flex 屬性或其他三者（flex-grow、flex-shrink、flex-basis）來定義擴展或壓縮的係數。
若有剩餘的空間，可決定彈性項目擴展填滿或是保持不變；
要是沒有足夠空間，則可以決定彈性項目維持在宣告的大小或預設大小，也可以依比例壓縮來符合剩餘空間。

flex 屬性指定了元件的彈性長度（flexible length）：元素的「長度」是指彈性元素在主軸方向上的長度，當方框是彈性項目，是 flex 來決定盒子的主要尺寸大小，而不是由主要大小屬性( main size, 如：height 和 width )來決定。

flex 屬性的組成包含了彈性成長係數（flex growth factor）、彈性壓縮係數（flex shrink factor）及彈性基準（flex basis）。

而flex-grow、flex-shrink、flex-basis這三者屬性我後面會詳述。

簡而言之，

• <flex-grow>
  定義彈性項目的彈性成長（擴展）。當負值時為無效；省略這個屬性時，預設值是 1。初始值為 0。
• <flex-shrink>
  定義彈性項目的彈性收縮。當負值時為無效；省略這個屬性時，預設值是 1。初始值為 1。
• <flex-basis>
  定義彈性項目的彈性基礎。省略這個屬性時，預設值為 0%。初始值為 auto。

「省略這個屬性時」可以參考單值語法與雙值語法

寫法

上面提到flex屬性寫法是：

flex: <flex-grow> <flex-shrink> <flex-basis>;
/* 順序不可更動 */
/* 也是三值語法 */

但不會每次都要求三種屬性值寫好寫滿，
所以出現僅單值語法、雙值語法以及三值語法，但通常建議避免省略寫法：

One-value syntax單值語法

• 情況一：
  flex: 2;
  2會是代表<flex-grow>

/* 實際展開後會是 */
flex: 2 1 0%;  
/* 所有瀏覽器的行為 */

• 情況二：
  flex: 100px;
  100px會代表<flex-basis>

/* 實際展開後會是 */
flex: 1 1 100px;
/* 這個項目可以放大、可以縮小，初始大小是 100px。 */

• 情況三：
  flex: none; (或其他預設關鍵字，如：initial、auto)
  詳細後面會介紹

flex: 0 0 auto;
/* 這個項目不放大、不縮小，大小由內容或其他屬性決定。 */

Two-value syntax雙值語法

規則：

• 第一個值必須是 <flex-grow>
• 第二個值有兩種可能：

1. 如果第二個是 <flex-shrink>
   （例如：flex: 2 1）

/* 實際展開後會是 */
flex: 2 1 0%;
/* flex-basic預設值為 0% */

2. 如果第二個是 <flex-basis>
   （例如：flex: 1 50px）

/* 實際展開後會是 */
flex: 1 1 50px;
/* flex-shrink預設值為1 */

Three-value syntax三值語法

一般來說，就是原本定義的寫法。

flex 基礎屬性值

後來引申出幾個常見的 flex 預設基礎設定值，作為預設快捷值/關鍵字（keywords）。

flex: initial

等同於 flex: 0 1 auto ;
彈性項目不會擴展，但可以縮小。
項目的大小會根據其 width 或 height 屬性而定，取決於 flex-direction 的方向而定。如果沒有多餘空間，項目將縮小到其最小尺寸以適合容器內，但不會增長以吸收彈性容器中任何可用的空間。

flex: auto

等同於 flex: 1 1 auto ;
彈性項目可以擴展和縮小。
項目的大小會根據其 width 或 height 屬性而定，取決於 flex-direction 的方向而定，但在容器有額外空間時會自動增大來填滿空間；而在容器空間不足時，會自動縮小到最小尺寸以適應容器。

flex: none

等同於 flex: 0 0 auto ;
彈性項目既不會擴展也不會縮小。
該項目的大小會根據其 width 或 height 屬性來決定，取決於 flex-direction 的方向而定。

flex: 1

等同於 flex: 1 1 0% ; (可參考 單值語法)
彈性項目的主軸尺寸（寬或高，取決於排列方向）會根據設定的數值按比例分配。
flex-basis 設定為零，並使彈性項目具有彈性。
該項目的尺寸至少會等於它的最小尺寸（例如 min-width），然後容器中剩餘的空間會根據所有彈性項目的成長因素（flex-grow）進行比例分配。
如果所有項目都使用此設定，空間會根據它們設定的數值進行平均或按比例分配。

參考資料

CSS Flexible Box Layout Module Level 1 - 7.1.

Mdn : Flex

W3school - CSS order Property